<script setup>
  import { Suspense, reactive } from 'vue'
  import { collectOptions } from '@/helpers/context.js'

  import ProjectFileTreeComponent from './tree/ProjectFileTreeComponent.vue'

  // Collect the inlined js options
  const options = collectOptions()
  const error = reactive({
    hasError: false,
    message: '',
  })
  const setError = (keyName) => {
    console.error(`No ${keyName} provided by the backend `)
    console.error(options)
    error.hasError = true
    error.message =
      'Une erreur est survenue lors de la récupération des données'
  }
  if (!options.project_id) {
    setError('project_id')
  }
  if (!options.form_config_url) {
    setError('form_config_url')
  }
  if (!options.title) {
    setError('title')
  }
</script>

<template>
  <Suspense>
    <ProjectFileTreeComponent
      :project-id="options.project_id"
      :business-id="options.business_id"
      :task-id="options.task_id"
      :form-config-url="options.form_config_url"
      :title="options.title"
    />
    <template #fallback> Loading... </template>
  </Suspense>
</template>
